<template>
  <div>
    <p v-if='isReadOnlyPage === true' style="word-break:break-all;">{{ value }}</p>
    <a-input @click="alertModal" v-else v-model='values' @change='handleChange' :disabled="isDisabled"/>
    <SCHOOLSELECTOR :schoolModalVisible="schoolModalVisible" @changeTheSchool="changeTheSchool" @closeSchoolModal="closeSchoolModal"></SCHOOLSELECTOR>
  </div>
</template>

<script>
import SCHOOLSELECTOR from '@/components/formComponents/ChooseTheSchool/ChooseTheSchool'
export default {
  name: 'TextField',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: ['value', 'isReadOnlyPage', 'isDisabled'],
  components: { SCHOOLSELECTOR },
  data () {
    return {
      values: '',
      schoolModalVisible: false
    }
  },
  watch: {
    value: function (ele) {
      this.values = ele
    }
  },
  methods: {
    alertModal () {
      this.schoolModalVisible = true
    },
    changeTheSchool (data) {
      this.values = data
      this.schoolModalVisible = false
      this.$emit('change', data)
    },
    closeSchoolModal () {
      this.schoolModalVisible = false
    },
    handleChange (value) {
      this.$emit('change', value)
    }
  }
}
</script>
